<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TikTok</title>

    <link rel="apple-touch-icon-precomposed" href="img2/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="img2/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">

</head>

<script type="text/javascript">
    var url;
    var lang = (navigator.appName=='Netscape'?navigator.language:navigator.userLanguage).toLowerCase();
    switch(lang){
        case 'en':
            url = '/?lang=eng';
            break;
        case 'en-us':
            url = '/usa/';
            break;
        case 'zh-cn':
            url = '/cn/';
            break;
        case 'zh-tw':
            url = '/zh-tw/';
            break;
        case 'zh-hk':
            url = '/hongkong';
            break;
        default:
            url = '/';
    }
    console.log(url);
</script>
<body>

<div class="out-container">
    <div class="video-bg pc-dis-no" id="video-bg">
        <div class="video">
            <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" muted autoplay="autoplay" >

            </video>
        </div>
    </div>


    <div class="out-wrapper">


    <header class="container J_Header header">
        <div class="header-container">
            <div class="logo-warpper">
                <a class="logo" id="logo" href="###"></a>
            </div>
            <!--<div class="col-3 pc-dis-no space"></div>-->
            <div class="col-3 pc-dis-no navbar-btn">
                <div class="hamburger" id="hamburger">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="nav-warpper" id="downlist">
                <a href="###" id="home">Home</a>
                <a href="###" id="newsroom">Newsroom</a>
                <a href="###" id="download" class="">Download</a>
                <a href="###recharge/" id="recharge" class="dis-no">Recharge</a>
                <a href="###mas" id="musician" class="dis-no">Musician</a>
                <span class="menu-line"></span>

                <a href="###" class="pc-dis-no mb-logo">
                    <img src="img/logo_dl_785ac87.png" alt="tiktok">
                </a>
            </div>
        </div>
    </header>

    <div class="container auto-width right-panel">
        <div class="content-box">
            <img src="img/tiktok_logo.png" alt="TikTok"
                 class="logo pc-vis-hid"/>

            <div class="content-header">
                <div class="content-header-desc">
                    <p class="content-header-slogen pc-vis-hid">Make Every Second Count</p>
                </div>
            </div>


            <div class="content-footer">
                <div class="download-btn-group">
                    <a class="download-btn download-ios-btn" id="download_ios" data-role="iphone"
                       href="###">
                        <img src="img/apple_icon.png"
                             alt="apple-store"/>
                    </a>
                    <a class="download-btn download-android-btn" data-role="android" id="download_android"
                        href="###">
                        <img src="img/google_icon.png"
                             alt="google-store"/>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="">
            <div class="infomation-group">
                <!--<ul>-->
                    <!--<li class="info-group1">-->
                        <!--<h2>Company</h2>-->
                        <!--<a href="###i18n/about/">About TikTok</a>-->
                        <!--<a href="###i18n/contact/">Contact</a>-->
                    <!--</li>-->
                    <!--<li class="info-group2">-->
                        <!--<h2>Community</h2>-->
                        <!--<a href="###">Support</a>-->
                        <!--<a href="###?ht_kb=community-policy">Community Policy</a>-->
                        <!--<a href="###safety/" id="safety_center">Safety Center</a>-->
                    <!--</li>-->
                    <!--<li class="info-group3">-->
                        <!--<h2>Legal</h2>-->
                        <!--<a href="###i18n/terms/">Terms of Use</a>-->
                        <!--<a href="###i18n/privacy/">Privacy Policy</a>-->
                        <!--<a href="###i18n/law-enforcement/">Law Enforcement</a>-->
                    <!--</li>-->
                    <!--<li class="rest info-group4">-->
                        <!--<h2></h2>-->
                        <!--<a href="###i18n/virtual-items/">Virtual Items</a>-->
                        <!--<a href="###i18n/copyright/">Copyright Policy</a>-->
                        <!--<a href="###i18n/open-source/">Open Source</a>-->
                    <!--</li>-->
                <!--</ul>-->

                <!--<div class="info">-->
                    <!--<div class="copyright"><span>All Rights Reserved | TikTok</span></div>-->
                    <!--<div class="language"><span>Language:</span>-->
                        <!--<div class="language-wrap" id="languageWrap">-->
                            <!--<p>English</p>-->
                            <!--<div class="language-list" id="lg-list">-->
                                <!--<a class="language-li" href="###kr/" id="language-kr">한국어</a>-->
                                <!--<a class="language-li" href="###jp/" id="language-jp">日本語</a>-->
                                <!--<a class="language-li" href="###vi/" id="language-jp">Tiếng Việt</a>-->
                                <!--<a class="language-li" href="###id/" id="language-jp">Indonesia</a>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->



                <div class="follow-us">
                    <!--<p>Follow us</p>-->
                    <ul>
                        <li>
                            <a class="follow-img-1"  href="###/tiktok/"></a>
                            <p>Instagram</p>
                        </li>
                        <li>
                            <a class="follow-img-2"  href="###/tiktok/"></a>
                            <p>Facebook</p>
                        </li>
                        <li>
                            <a class="follow-img-3"  href="###/tiktok/"></a>
                            <p>Twitter</p>
                        </li>
                        <li>
                            <a class="follow-img-4"  href="###/tiktok/"></a>
                            <p>Youtube</p>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="follow-language">
                <!--<div class="follow-us"><span>Follow us</span>-->
                    <!--<ul>-->
                        <!--<li>-->
                            <!--<a class="follow-img-1"  href="###/tiktok/"></a>-->
                            <!--<p>Instagram</p>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a class="follow-img-2"  href="###/tiktok/"></a>-->
                            <!--<p>Facebook</p>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a class="follow-img-3"  href="###/tiktok/"></a>-->
                            <!--<p>Twitter</p>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a class="follow-img-4"  href="###/tiktok/"></a>-->
                            <!--<p>Youtube</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->

                <div class="info">

                    <div class="language"><span>Language:</span>
                        <div class="language-wrap" id="languageWrap">
                            <p>English</p>
                            <div class="language-list" id="lg-list">
                                <a class="language-li" href="###kr/" id="language-kr">한국어</a>
                                <a class="language-li" href="###jp/" id="language-jp">日本語</a>
                                <a class="language-li" href="###vi/" id="language-jp">Tiếng Việt</a>
                                <a class="language-li" href="###id/" id="language-jp">Indonesia</a>
                            </div>
                        </div>
                    </div>

                    <div class="copyright"><span>All Rights Reserved | NIGHTS</span></div>

                </div>
            </div>
        </div>
    </footer>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#hamburger").click(function () {
    $(".navbar-btn").toggleClass("z9999");
    $("#downlist").slideToggle("fast");
    $(".J_Header").toggleClass("black-bg");
    $(this).toggleClass("is-active");
})

$("#languageWrap").click(function () {
    // $("#lg-list").slideToggle();
    $("#lg-list").toggleClass("la-dis");

})
</script>

<script type="text/javascript" src="js/vue.js"></script>
<script src="//vjs.zencdn.net/5.19/video.min.js"></script>
<script type="text/javascript" src="js/video.min.js"></script>

<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'js/videojs/swf/video-js.swf';

    var vm = new Vue({
        el: '#video-bg',
        data: {
            visible: true,
            listItem:[
                {isplay:true, type:"video/mp4", url: "img/home-bg1.mp4"},
                {isplay:true, type:"video/mp4", url: "img/home-bg2.mp4"},
                {isplay:true, type:"video/mp4", url: "img/home-bg3.mp4"}
            ]
        },
        mounted:function(){
            this.show();
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
        },
        methods: {
            show: function () {
                this.visible = true;
            }

        }
    });

    var list = vm.listItem;
    var i = 0;
    $(function(){

        var source = document.getElementById("video-source");
        var player = videojs("my-player", {
            "autoplay":true,
            "sources": [{
                src: list[i].url,
                type: list[i].type
            }],

        }, function(){
            this.on('loadeddata',function(){
                this.play();
            })
            this.on('ended',function(){
                i++;
                if(i >= list.length){
                    i = 0;
                }
                var videoObj = list[i];
                this.src({type: videoObj.type, src: videoObj.url});
                this.play();
            })

        });
    });
</script>


</html>